<template>
  <div class="box">
    <input-text @doInput="doInput"></input-text>
    <todo-list1 :list="list" @doAll="doAll"></todo-list1>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { todoList } from './components/type';
import InputText from './components/inputText.vue'
import TodoList1 from './components/todoList.vue'
const list: Array<todoList> = reactive([])
const doInput = (e: todoList) => {
  list.push(e)
}
const doAll = (e: boolean) => {
  list.forEach((item: todoList) => {
    item.isShow = e
  })
}
</script>

<style scoped>
.box {
  width: 500px;
  border: 1px solid red;
  padding: 20px;
  box-sizing: border-box;
  margin: 0 auto;
}
</style>
